<script setup>
import NavTop from '@/components/NavTop.vue'
import { ref } from 'vue'
import { uploadImgService, saveCategoryService, saveRecordService } from '@/api/record.js'
const recordDemo = ref(
  {
    name: '',
    comment: '',
    province: '',
    city: '',
    county: '',
  }
)

// 图片文件
const file = ref()
// 图片地址
const imgUrl = ref('https://web-tlias-lihan.oss-cn-beijing.aliyuncs.com/%E5%9B%BE%E7%89%873.png')
// 图解
const imgComment = ref('')
// 选择的分类的名字
const selectStr = ref('请选择分类')
// 选择的分类的id
const select = ref(0)
// 分类名字数组
const categoryStr = ['', '疆域', '星野', '学宫', '城池', '县署', '水利', '祠庙', '山水名胜', '其他']

const handleCommand = (e) => {
  select.value = e
  selectStr.value = categoryStr[e];
}
const uploadImg = async () => {

  // 创建一个FormData对象
  const formData = new FormData();
  console.log(file.value.files[0])
  // 将文件添加到FormData中
  formData.append('file', file.value.files[0]);
  const result = await uploadImgService(formData);
  imgUrl.value = result.data.data
}
// 保存方志
const saveRecord = async () => {
  try {
    const res = await saveRecordService(recordDemo.value);
    // 在这里处理正常情况下的逻辑 
    if (res.data.code == 0) {
      ElMessage.error('保存失败!方志' + res.data.msg)
    } else {

      recordId.value = res.data.data
      ElMessage({
        message: '保存成功!',
        type: 'success',
        duration: '1500'
      })
    }
  } catch (error) {
    // 在这里处理错误的情况
    ElMessage.error('保存方志失败!发生未知错误')
  }

}
const recordId = ref('')
const imgName = ref('')
// 保存分类
const saveCategory = async () => {
  try {
    const res = await saveCategoryService({
      id: '',
      name: imgName.value,
      recordId: recordId.value,
      image: imgUrl.value,
      comment: imgComment.value
    }, select.value)
    // 在这里处理正常情况下的逻辑
    if (res.data.code == 0) {
      ElMessage.error('保存失败!分类舆图' + res.data.msg)
    } else {
      ElMessage({
        message: '保存成功!',
        type: 'success',
        duration: '1500'
      })
    }
  } catch (error) {
    // 在这里处理错误的情况
    ElMessage.error('保存方志失败!发生未知错误')
  }


}


// const toDatabase = () => {
//   saveRecordService(recordDemo.value)
// }
</script>

<template>
  <div class="head">
    <NavTop></NavTop>
  </div>

  <div class="databaseBox">
    <!-- <button type="primary" @click="toDatabase" class="database">上传到数据库</button> -->

  </div>

  <div class="container">
    <div class="left">
      <div class="addressBox">
        省: <input type="text" v-model="recordDemo.province">
        市: <input type="text" v-model="recordDemo.city">
        县: <input type="text" v-model="recordDemo.county">
      </div>

      <textarea placeholder="输入方志的标题" v-model="recordDemo.name" class="titleBox">
      </textarea>

      <div class="textBox">
        <textarea placeholder="输入方志的解题部分" v-model="recordDemo.comment" class="text">
        </textarea>
      </div>

      <button @click="saveRecord" class="saveBtn">保存</button>
    </div>
    <!-- 右边 -->
    <div class="right">
      <div class="head">
        图名:
        <input type="text" class="imgName" v-model="imgName" placeholder="输入图的名字">
        <el-dropdown size="small" class="select" split-button type="primary" @command="handleCommand">
          {{ selectStr }}
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="1">疆域</el-dropdown-item>
              <el-dropdown-item command="2">星野</el-dropdown-item>
              <el-dropdown-item command="3">学宫</el-dropdown-item>
              <el-dropdown-item command="4">城池</el-dropdown-item>
              <el-dropdown-item command="5">县署</el-dropdown-item>
              <el-dropdown-item command="6">水利</el-dropdown-item>
              <el-dropdown-item command="7">祠庙</el-dropdown-item>
              <el-dropdown-item command="8">山水名胜</el-dropdown-item>
              <el-dropdown-item command="9">其他</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <input type="file" @change="uploadImg" ref="file" class="file">

        <div class="imgBox" :style="{ backgroundImage: `url(${imgUrl})` }">
          <!-- <img :src="imgUrl" alt=""> -->
        </div>

      </div>
      <div class="body">
        <textarea placeholder="输入图解" v-model="imgComment"></textarea>
      </div>

      <button class="uploadImg " @click="saveCategory">保存舆图</button>

    </div>
  </div>


</template>

<style scoped lang="scss">
.databaseBox {
  padding-top: 35px;
  margin-bottom: 10px;

  .database {
    cursor: pointer;
    height: auto;
    font-size: 18px;
  }

  width: 100%;

  display: flex;
  justify-content: end;
}

.container {
  width: 100%;
  display: flex;
  height: 350px;
  margin: 0px auto;
  justify-content: space-evenly;

  .left {
    width: 40%;
    height: 350px;

    background-color: #efefef;

    // 保存方志按钮
    .saveBtn {
      width: 35px;
      height: 35px;
    }

    .addressBox {
      margin-top: 5px;
    }

    .titleBox {
      width: calc(100% - 20px);
      margin: 10px 10px;
      border-bottom: 1px solid #efefef;
      font-size: 10px;

      .title {
        height: 20px;
        padding: 7px;
        resize: none;
      }
    }

    .textBox {
      width: auto;
      min-height: 225px;
      padding: 7px;

      .text {
        width: 100%;
        resize: none;
        height: 225px;
        font-size: 10px
      }
    }
  }


  .right {

    width: 40%;
    height: 100%;
    background-color: #efefef;

    .head {
      width: 100%;

      .imgName,
      .file {
        width: 30%;
        height: 15px;
        margin: 5px;
      }

      .imgBox {

        width: 100px;
        height: 100px;
        background-size: contain; //把背景图片扩至至最大尺寸，以使其宽度和高度完全使用内容区域
        margin: 10px;
      }
    }

    .body {
      textarea {
        min-width: 100%;
        height: 150px;
      }
    }

    .uploadImg {
      width: 25px;
      font-size: 10px;
    }
  }

}
</style>